
<!--<template>
  <div>
  <el-container style="height: 100vh; overflow: hidden;">
&lt;!&ndash;    <el-aside>
      <template>
        <div>
          <el-avatar :size="200">user</el-avatar>
        </div>
      </template>
    </el-aside>&ndash;&gt;

    <el-main>

    </el-main>
  </el-container>
  </div>
</template>-->
<template>
  <div class="personal-center-container">
    <el-card class="profile-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
        </div>
      </template>

      <div class="profile-content">
        <div class="avatar-section">
          <el-avatar
              :size="120"
              :src="userInfo.avatar || 'https://picsum.photos/120/120'"
              :icon="userInfo.avatar ? '' : 'el-icon-user'">
          </el-avatar>

          <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarUpload"
              :before-upload="beforeAvatarUpload">
            <el-button size="small" type="primary">修改头像</el-button>
            <el-button size="small" @click="showPasswordDialog = true">修改密码</el-button>
          </el-upload>
        </div>

        <el-form
            :model="userInfo"
            :rules="formRules"
            ref="profileForm"
            label-width="120px"
            class="profile-form">

          <el-form-item label="用户名" prop="username">
            <el-input v-model="userInfo.username" disabled />
          </el-form-item>

          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="userInfo.realName" />
          </el-form-item>

          <el-form-item label="手机号" prop="phone">
            <el-input v-model="userInfo.phone" />
          </el-form-item>

          <el-form-item label="角色" prop="role">
            <el-input v-model="userInfo.role" disabled />
          </el-form-item>

          <el-form-item label="创建时间" prop="createTime">
            <el-input v-model="userInfo.createTime" disabled />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="saveProfile">保存修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 修改密码对话框 -->
    <el-dialog
        :visible.sync="showPasswordDialog"
        title="修改密码"
        :close-on-click-modal="false">

      <el-form
          :model="passwordForm"
          :rules="passwordRules"
          ref="passwordFormRef"
          label-width="120px">

        <el-form-item label="当前密码" prop="oldPassword">
          <el-input type="password" v-model="passwordForm.oldPassword" />
        </el-form-item>

        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" v-model="passwordForm.newPassword" />
        </el-form-item>

        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input type="password" v-model="passwordForm.confirmPassword" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showPasswordDialog = false">取消</el-button>
        <el-button type="primary" @click="changePassword">修改密码</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 用户信息
      userInfo: {
        id: 1,
        username: 'admin',
        realName: '管理员',
        phone: '13800138000',
        role: '超级管理员',
        createTime: '2023-01-01 10:00:00',
        avatar: '' // 头像URL
      },

      // 表单验证规则
      formRules: {
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ]
      },

      // 控制密码对话框显示
      showPasswordDialog: false,

      // 密码修改表单
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },

      // 密码表单验证规则
      passwordRules: {
        oldPassword: [
          { required: true, message: '请输入当前密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度至少为6位', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: this.validateConfirmPassword, trigger: 'blur' }
        ]
      }
    };
  },

  created() {
    // 页面加载时获取用户信息
    this.fetchUserInfo();
  },

  methods: {
    // 获取用户信息
    fetchUserInfo() {
      // TODO: 调用API获取用户信息
      // 示例API: GET /api/users/me
      console.log('TODO: 获取用户信息');

      // 模拟获取到用户信息
      // this.userInfo = response.data;
    },

    // 保存个人信息
    saveProfile() {
      this.$refs.profileForm.validate(valid => {
        if (valid) {
          // TODO: 调用API保存个人信息
          // 示例API: PUT /api/users/me
          console.log('TODO: 保存个人信息', this.userInfo);

          // 模拟保存成功
          this.$message.success('个人信息保存成功');
        } else {
          return false;
        }
      });
    },

    // 上传头像
    handleAvatarUpload(response, file) {
      // TODO: 处理头像上传成功逻辑
      // 示例API: POST /api/users/avatar
      console.log('TODO: 上传头像', response, file);

      // 模拟上传成功
      this.userInfo.avatar = URL.createObjectURL(file.raw);
      this.$message.success('头像上传成功');
    },

    // 上传头像前的校验
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('头像只能是 JPG 或 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('头像大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    // 验证确认密码
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    },

    // 修改密码
    changePassword() {
      this.$refs.passwordFormRef.validate(valid => {
        if (valid) {
          // TODO: 调用API修改密码
          // 示例API: POST /api/users/change-password
          console.log('TODO: 修改密码', this.passwordForm);

          // 模拟修改成功
          this.$message.success('密码修改成功，请使用新密码登录');
          this.showPasswordDialog = false;
          this.passwordForm = {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
          };
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.personal-center-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.profile-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-content {
  display: flex;
  padding: 20px;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 40px;
}

.avatar-uploader {
  margin-top: 20px;
}

.profile-form {
  flex: 1;
}
</style>